﻿<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="css/editor.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/colorpicker.min.css">
</head>

<body>
    <div class="header">
        <div class="logo">
            <a href="index.html"><img src="images/logo.png" alt=""></a>
        </div>
        <div class="header_body">
            <p><i class="icon-u-file"></i>&nbsp;计费系统流程监控</p>
        </div>
        <ul class="header_right">
            <li>
                <a href="">预览</a>
            </li>
            <li>
                <a href="">设置</a>
            </li>
            <li>
                <a href="###" id="save">保存</a>
            </li>
            <li>
                <a href="">退出</a>
            </li>
        </ul>
    </div>
    <div class="wrapper">
        <div class="fodder">
            <ul class="fodder_nav">
                <li data-body=".shape" class="active">
                    <i class="icon-u-shape"></i>
                    <span>图形</span>
                </li>
                <li data-body=".picture">
                    <i class="icon-u-img"></i>
                    <span>图片</span>
                </li>
                <li data-body=".text">
                    <i class="icon-u-text"></i>
                    <span>文字</span>
                </li>
                <li data-body=".template">
                    <i class="icon-u-resource"></i>
                    <span>模板</span>
                </li>
            </ul>
            <div class="fodder_body scroll">
                <ul class="shape">
                    <li data-src="svg/server.svg" data-crash="server" data-type="svg" data-name="服务器">
                        <img src="svg/server.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/administrator.svg" data-crash="administrator" data-type="svg" data-name="管理者">
                        <img src="svg/administrator.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                    <li data-src="svg/laptop.svg" data-crash="laptop" data-type="svg" data-name="笔记本">
                        <img src="svg/laptop.svg" draggable="true" alt="">
                    </li>
                </ul>
                <ul class="picture">
                    <li data-src="img/1.png" data-crash="imgServer" data-type="img" data-name="服务器">
                        <img src="img/1.png" draggable="true" alt="">
                    </li>
                    <li data-src="img/1.png" data-crash="imgServer" data-type="img" data-name="服务器">
                        <img src="img/1.png" draggable="true" alt="">
                    </li>
                    <li data-src="img/1.png" data-crash="imgServer" data-type="img" data-name="服务器">
                        <img src="img/1.png" draggable="true" alt="">
                    </li>
                    <li data-src="img/1.png" data-crash="imgServer" data-type="img" data-name="服务器">
                        <img src="img/1.png" draggable="true" alt="">
                    </li>
                </ul>
                <ul class="text">
                    <li data-text="节点" data-crash="default" data-type="textObj" data-name="" data-color="#fff">
                        <img src="images/text1.png" draggable="true" alt="">
                    </li>
                    <li data-text="普通文本"  data-type="text" data-name="" data-color="#09c">
                        <img src="images/text2.png" draggable="true" alt="">
                    </li>
                </ul>
                <ul class="template">
                    <li data-template="template1">
                        <img src="images/template1.jpg" draggable="false" alt="">
                    </li>
                    <li data-template="template2">
                        <img src="images/template2.jpg" draggable="false" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <div class="editor">
            <canvas id="canvas" width=2000 height=2000></canvas>
        </div>
        <ul class="tool">
            <li id="tool_pointer">
                <i class="icon-u-pointer"></i>
            </li>
            <li id="tool_straightLine">
                <i class="icon-u-line2"></i>
            </li>
            <li id="tool_brokenLine">
                <i class="icon-u-broken-line"></i>
            </li>
            <li id="tool_brokenLine2">
                <i class="icon-u-broken-line2"></i>
            </li>
            <li id="recordsUndo">
                <i class="icon-u-arrow-left"></i>
            </li>
            <li id="recordsRedo">
                <i class="icon-u-arrow-right"></i>
            </li>
            <li id="canvasZoomOut">
                <i class="icon-u-zoom-out"></i>
            </li>
            <li id="canvasZoomIn">
                <i class="icon-u-zoom-in"></i>
            </li>
            <li id="canvasZoom">
                <i class="icon-u-zoom"></i>
            </li>
            <li id="canvasGrid">
                <i class="icon-u-gird"></i>
            </li>
        </ul>
        <div class="attr">
            <div class="attr_nav">
                <a class="active" href="javascript:void(0);">样式</a><a href="javascript:void(0);">属性</a>
            </div>
            <div class="scroll styleAttr">
                <ul class="attr_ul_text">
                    <li>
                        <label for="">文字内容:</label>
                        <input type="text" name="" id="text_text" placeholder="文本">
                    </li>
                    <li class="attr_form_three">
                        <label for="">文字样式:</label>
                        <div class="marginbottom">
                            <input type="text" name="" id="text_size" placeholder="文本尺寸">
                            <var>size</var>
                        </div>
                        <div class="marginbottom">
                            <input type="text" name="" id="text_color" class="color" placeholder="文本颜色">
                            <var>color</var>
                        </div>
                        <div class="marginbottom">
                            <input type="text" name="" id="text_bg" class="color" placeholder="文本颜色">
                            <var>背景色</var>
                        </div>
                        <label for=""></label>
                        <div class="marginbottom">
                            <select name="" id="text_family">
                                <option value="Microsoft YaHei">微软雅黑</option>
                                <option value="SimSun">宋体</option>
                                <option value="SimHei">黑体</option>
                            </select>
                            <var>字体</var>
                        </div>
                        <div class="marginbottom">
                            <select name="" id="text_weight">
                                <option value="normal">无</option>
                                <option value="bold">加粗</option>
                            </select>
                            <var>加粗</var>
                        </div>
                        <div class="marginbottom">
                            <select name="" id="text_style">
                                <option value="normal">无</option>
                                <option value="italic">倾斜</option>
                            </select>
                            <var>倾斜</var>
                        </div>
                        <label for=""></label>
                        <div>
                            <select name="" id="text_decoration">
                                <option value="normal">无</option>
                                <option value="overline">上滑线</option>
                                <option value="line-through">删除线</option>
                                <option value="underline">下划线</option>
                            </select>
                            <var>强调</var>
                        </div>
                        <div>
                            <input type="text" name="" id="text_border"  placeholder="文本颜色">
                            <var>描边size</var>
                        </div>
                        <div>
                            <input type="text" name="" id="text_border_color" class="color" placeholder="文本颜色">
                            <var>描边color</var>
                        </div>
                    </li>
                </ul>
                <ul class="attr_ul_obj">
                    <li>
                        <label for="">ID:</label>
                        <input type="text" name="" id="obj_id" placeholder="文本">
                    </li>
                    <li>
                        <label for="">名称:</label>
                        <input type="text" name="" id="obj_name" placeholder="文本">
                    </li>
                    <li class="attr_form_two">
                        <label for="">名词样式:</label>
                        <div>
                            <input type="text" name="" id="obj_name_size" placeholder="文本尺寸">
                            <var>size</var>
                        </div>
                        <div>
                            <input type="text" name="" id="obj_name_color" class="color" placeholder="文本颜色">
                            <var>color</var>
                        </div>
                    </li>
                    <li class="attr_form_three">
                        <label for="">容器:</label>
                        <div>
                            <select type="text" name="" id="objContainer_shape" class="up-form-control">
                                <option value="">无</option>
                                <option value="triangle">三角形</option>
                                <option value="square">正方形</option>
                                <option value="rect">长方形</option>
                                <option value="rhombus">菱形</option>
                                <option value="ellipse">椭圆</option>
                                <option value="circle">圆形</option>
                            </select>
                            <var>形状</var>
                        </div>
                        <label for=""></label>
                        <div>
                            <input type="text" name="" id="objContainer_color" class="color" placeholder="颜色">
                            <var>color</var>
                        </div>
                        <div>
                            <input type="text" name="" id="objContainer_width" placeholder="宽">
                            <var>宽</var>
                        </div>
                        <div>
                            <input type="text" name="" id="objContainer_height" placeholder="高">
                            <var>高</var>
                        </div>
                    </li>
                    <li class="attr_form_three_2">
                        <label for="">容器边:</label>
                        <div>
                            <input type="text" name="" id="objContainer_border_size" placeholder="尺寸">
                            <var>size</var>
                        </div>
                        <div>
                            <select name="" id="objContainer_border_style" class="up-form-control">
                                <option value="null">───────────</option>
                                <option value="[2,2]">---------------</option>
                                <option value="[6,6]">- - - - - - - -</option>
                                <option value="[18,18]">——&emsp;——&emsp;——</option>
                            </select>
                            <var>style</var>
                        </div>
                        <div>
                            <input type="text" name="" id="objContainer_border_color" class="color" placeholder="颜色">
                            <var>color</var>
                        </div>
                    </li>
                    <li>
                        <label for="">颜色:</label>
                        <input type="text" name="" id="obj_fill" class="color" value="默认" placeholder="颜色">
                    </li>
                    <li class="attr_form_two">
                        <label for="">位置:</label>
                        <div>
                            <input type="text" name="" id="obj_left" placeholder="left">
                            <var>left</var>
                        </div>
                        <div>
                            <input type="text" name="" id="obj_top" placeholder="top">
                            <var>top</var>
                        </div>
                    </li>
                </ul>
                <ul class="attr_ul_line">
                    <li>
                        <label for="">ID:</label>
                        <input type="text" name="" id="line_id" placeholder="文本">
                    </li>
                    <li>
                        <label for="">线名:</label>
                        <input type="text" name="" id="line_name" placeholder="文本">
                    </li>
                    <li class="attr_form_two">
                        <label for="">线名样式:</label>
                        <div>
                            <input type="text" name="" id="line_name_size" placeholder="文本尺寸">
                            <var>size</var>
                        </div>
                        <div>
                            <input type="text" name="" id="line_name_color" class="color" placeholder="文本颜色">
                            <var>color</var>
                        </div>
                    </li>
                    <li>
                        <label for="">起始ID:</label>
                        <input type="text" name="" id="line_sObj_id" placeholder="文本">
                    </li>
                    <li>
                        <label for="">终点ID:</label>
                        <input type="text" name="" id="line_eObj_id" placeholder="文本">
                    </li>
                    <li class="attr_form_three_2">
                        <label for="">线条样式:</label>
                        <div>
                            <input type="text" name="" id="line_size" placeholder="尺寸">
                            <var>size</var>
                        </div>
                        <div>
                            <select name="" id="line_style" class="up-form-control">
                                <option value="null">───────────</option>
                                <option value="[2,2]">---------------</option>
                                <option value="[6,6]">- - - - - - - -</option>
                                <option value="[18,18]">——&emsp;——&emsp;——</option>
                            </select>
                            <var>style</var>
                        </div>
                        <div>
                            <input type="text" name="" id="line_color" class="color" placeholder="颜色">
                            <var>color</var>
                        </div>
                    </li>
                    <li>
                        <label for="">箭头:</label>
                        <select name="" id="line_arrow">
                            <option value='true'>带箭头</option>
                            <option value='false'>不带箭头</option>
                        </select>
                    </li>
                </ul>
                <ul class="attr_ul_canvas">
                    <li>
                        <label for="">背景色:</label>
                        <input type="text" name="" id="canvas_bg" class="color" placeholder="文本">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <ul class="rightMenu">
        <li><a class="rightMenu_remove_btn" href="javascript:void(0);">删除</a></li>
        <li><a class="rightMenu_top_btn" href="javascript:void(0);">置顶显示</a></li>
        <li><a class="rightMenu_bottom_btn" href="javascript:void(0);">置底显示</a></li>
        <li><a class="rightMenu_save_btn" href="javascript:void(0);">保存到缓存</a></li>
        <li><a class="rightMenu_clear_btn" href="javascript:void(0);">清空画布</a></li>
    </ul>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>
    <script src="js/fabric.min.js"></script>
    <script src="js/json.js"></script>
    <script src="js/ugraph.js"></script>
    <script src="js/editor.js"></script>
    <script src="js/colorpicker.min.js"></script>
</body>
<script>
$('.color').colorpicker();
$('.scroll').niceScroll({
    cursorcolor: "rgba(0,0,0,.3)",
    cursorwidth: "5px",
    cursorborder: "0",
    cursorborderradius: "5px",
    background: "rgba(0,0,0,.1)",
});

$(".fodder_nav li").click(function() {
    $(".fodder_nav li").removeClass("active");
    $(this).addClass("active");
    $(".fodder_body>*").hide();
    $($(this).attr("data-body")).show();
})
</script>

</html>
